<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>All examples</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript" src="controls.js"></script>

<script type="text/javascript">
document.observe('dom:loaded', function(){
  var form = $(document.forms.test);
  $(form.elements.selecttree).buildTree();
  $(form.elements.inputmask).mask("a ~99 99 99 a*");
  $(form.elements.textarea).setResizable();

  $(form.elements.slider1).slider({step: 1, max: 100, hideInput: false,showTicks: false, orientation: 'vertical', ticksPosition: 'both'});
  $(form.elements.slider2).slider({step: 2, max: 10, hideInput: true, orientation: 'vertical', ticksPosition: 'right', tooltip: true});
  $(form.elements.slider3).slider({step: 0.5, min: 0, max: 5, showTicks: true, tooltip: true, orientation: 'horizontal', ticksPosition: 'bottom', ticks: {'0': 'min', '5': 'max'}});
  
  $A(form.elements['slider4[]']).each(function(e){$(e).slider({step: 0.1, min: 0, max: 10, showTicks: false, tooltip: true, orientation: 'vertical', ticksPosition: 'both'})});
});
</script>

</head>
<body>

<form name="test" action="?" onsubmit="return false;" method="get">
  <table>
    <tr>
      <th>
        Input mask :
        <span class="description">A simple input mask</span>
      </th>
      <td>

        <input type="text" name="inputmask" id="inputmask" />a ~99 99 99 a*
        (a: letterk 9: digit, ~: + or -, *: anything)
      </td>
    </tr>
    <tr>
      <th>
        Select tree :
        <span class="description">Builds a tree view of the Optgroups</span>
      </th>
      <td>

        <select name="selecttree" class="select-tree">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <optgroup label="Group 1">
            <option value="1-1">Option 1 - 1</option>
            <option value="1-2">Option 1 - 2</option>
            <option value="1-3">Option 1 - 3</option>

          </optgroup>
          <optgroup label="Group 2">
            <option value="2-1">Option 2 - 1</option>
            <option value="2-2">Option 2 - 2</option>
            <option value="2-3">Option 2 - 3</option>
          </optgroup>
        </select>

      </td>
    </tr>
    <tr>
      <th>
        Resizable textarea :
        <span class="description">Allows the user to resize every textarea</span>
      </th>
      <td>
        <textarea name="textarea" id="textarea" style="display: block; width: 100%">blah</textarea>
      </td>
    </tr>
    <tr>
      <th>
        Slider :
        <span class="description">Vertical, horizontal, single, double or no ticks, tooltip...</span>
      </th>
      <td>
        <table style="width: 100%;">
          <tr>
            <td style="height: 100px;"><input type="text" name="slider1" value="25" /></td>
            <td style="height: 100px;"><input type="text" name="slider2" value="6" /></td>
          </tr>
          <tr>
            <td colspan="2"><input type="text" name="slider3" value="-15" /></td>
          </tr>
        </table>
        
        <table style="width: 100%;">
          <tr>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
            <td style="height: 200px;"><input type="text" name="slider4[]" value="5" /></td>
          </tr>
      </td>
    </tr>
  </table>
</form>

<div id="dom-1"></div>

</body>
</html>